<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>

  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>

</body>
<script>
  let dom = document.querySelector("div")
  let myChart = echarts.init(dom)
  let option = {
    legend: {
      top: 10
    },
    //系列
    series: [
      {
        //系列名
        name: "2021",
        //图标类型
        type: "pie",
        //设置成南丁格尔图
        roseType:"area",
        // data: [100, 200, 160, 180]
        data: [
          { name: "张三", value: 100 },
          { name: "李四", value: 200 },
          { name: "王五", value: 160 },
          { name: "赵六", value: 180 },
        ],
        //标签
        label: {
          show: true,             //是否显示标签
          position: "outside",      //标签位置
          fontSize: 14,            //标签文字大小
          formatter:"{b}-{d}%",      //标签输出的格式   
        },
        //折线
        labelLine: {
          show: true,           //是否显示折线
          length: 60,           //折线第一段长度
          length2: 50           //折线第二段长度
        },
        //半径
        radius: [20, 100],          //圆的半径（内圆和外圆）
        // center:[300,100],        //圆心位置（图形位置）
        //强调
        emphasis: {
          disabled: false,          //是否禁用
          focus: "self"              //其它颜色变浅，只强调自己
        }
      }
    ]
  }
  myChart.setOption(option)
</script>

</html>